<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/elementUI.js"></script>
    <script src="js/axios.js"></script>
    <link rel="stylesheet" href="css/elementUI.css">
</head>
<body>
<div id="app">
    <el-form ref="pojo" :model="pojo" label-width="80px">
        <el-form-item label="日期范围">
            <el-radio-group v-model="pojo.date" size="small">
                <el-radio label="0" border>全部</el-radio>
                <el-radio label="1" border>今日</el-radio>
                <el-radio label="2" border>昨日</el-radio>
                <el-radio label="3" border>一周内</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="任务类型">
            <el-radio-group v-model="pojo.type" size="small">
                <el-radio label="0" border>全部</el-radio>
                <el-radio v-for="t in taskTypeList" :label="t.id" border>{{t.type}}</el-radio>

            </el-radio-group>
        </el-form-item>
        <el-form-item label="任务状态">
            <el-radio-group v-model="pojo.status" size="small">
                <el-radio label="5" border>全部</el-radio>
                <el-radio label="0" border>未开始</el-radio>
                <el-radio label="1" border>进行中</el-radio>
                <el-radio label="2" border>已提交</el-radio>
                <el-radio label="3" border>审核成功</el-radio>
                <el-radio label="4" border>审核失败</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="handleAdd">发布</el-button>
            <el-button type="primary" @click="toResolve">任务分解</el-button>
        </el-form-item>
    </el-form>


    <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                prop="id"
                label="ID">
        </el-table-column>
        <el-table-column
                prop="title"
                label="任务标题">
        </el-table-column>
        <el-table-column
                label="任务类型">
            <template slot-scope="scope">
                {{scope.row.taskType.type}}
            </template>
        </el-table-column>

        <el-table-column
                prop="level"
                label="任务等级">
        </el-table-column>
        <el-table-column
                prop="startTime"
                label="开始时间">
        </el-table-column>

        <el-table-column
                prop="endTime"
                label="结束时间">
        </el-table-column>

        <el-table-column
                label="任务状态">

            <template slot-scope="scope">
                {{scope.row.status=='0'?'未开始':scope.row.status=='1'?'进行中':scope.row.status=='2'?'已提交':scope.row.status=='3'?'审核成功':'审核失败'}}
            </template>
        </el-table-column>

        <el-table-column
                label="任务负责人">
            <template slot-scope="scope">
                {{scope.row.director.username}}
            </template>
        </el-table-column>

        <el-table-column
                label="任务监督人">

            <template slot-scope="scope">
                {{scope.row.supervisor.username}}
            </template>
        </el-table-column>

        <el-table-column
                prop="time"
                label="任务持续时间">
        </el-table-column>
        <el-table-column
                label="操作">

            <template slot-scope="scope">
                <el-button @click="findById(scope.row.id)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2,4,6,8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="任务详情" :visible.sync="dialogFormVisible">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="任务详情" name="first">
                <el-form :model="form">
                    <el-form-item label="任务标题" :label-width="formLabelWidth">
                        <el-input v-model="form.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="任务类型" :label-width="formLabelWidth">
                        <el-select v-model="form.tid" placeholder="请选择活动区域">
                            <el-option v-for="t in taskTypeList" :key="t.id" :label="t.type" :value="t.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="任务等级" :label-width="formLabelWidth">
                        <el-select v-model="form.level" placeholder="请选择活动区域">
                            <el-option label="普通" value="普通"></el-option>
                            <el-option label="重要" value="重要"></el-option>
                            <el-option label="重点" value="重点"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="任务开始时间" :label-width="formLabelWidth">
                        <el-date-picker
                                v-model="form.startTime"
                                type="datetime"
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="任务结束时间" :label-width="formLabelWidth">
                        <el-date-picker
                                v-model="form.endTime"
                                type="datetime"
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="任务状态" :label-width="formLabelWidth">
                        <el-select v-model="form.status" placeholder="请选择活动区域">
                            <el-option label="未开始" value="0"></el-option>
                            <el-option label="进行中" value="1"></el-option>
                            <el-option label="已提交" value="2"></el-option>
                            <el-option label="审核成功" value="3"></el-option>
                            <el-option label="审核失败" value="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="任务负责人" :label-width="formLabelWidth">
                        <el-select v-model="form.directorId" placeholder="请选择活动区域">
                            <el-option v-for="t in userList" :key="t.id" :label="t.username" :value="t.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="任务监督人" :label-width="formLabelWidth">
                        <el-select v-model="form.supervisorId" placeholder="请选择活动区域">
                            <el-option v-for="t in userList" :key="t.id" :label="t.username" :value="t.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="任务持续时间" :label-width="formLabelWidth">
                        <el-input v-model="form.time" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="任务详情" :label-width="formLabelWidth">
                        <el-input v-model="form.content" autocomplete="off"></el-input>
                    </el-form-item>

                </el-form>
            </el-tab-pane>
            <el-tab-pane label="任务参与人" name="second">
                <el-transfer
                        v-model="ids"
                        :titles="['可选人员', '已选人员']"
                        :props="{
                          key: 'id',
                          label: 'username'
                        }"
                        :data="userList">
                </el-transfer>
            </el-tab-pane>
        </el-tabs>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addAndUpdate">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [],
            multipleSelection: [],
            pageNum: 1,
            pageSize: 2,
            total: 10,
            form: {},
            dialogFormVisible: false,
            formLabelWidth: "120px",
            taskTypeList: [],
            userList: [],
            activeName: 'first',
            ids: [],
            pojo: {
                date: "0",
                type: "0",
                status: "5"
            }

        },
        watch: {
            pojo: {
                deep: true,
                handler(val) {
                    this.findPage();
                }
            }
        },
        methods: {
            toResolve(){
                location.href="resolve.html"
            },
            addAndUpdate(){
                axios.post(`/task/${this.form.id==null?'add':'update'}?ids=${this.ids}`,this.form).then(res=>{
                    this.dialogFormVisible = false;
                    this.findPage();
                })
            },
            handleAdd(){
                this.dialogFormVisible = true;
                // 数据清空
                this.form ={};
                this.ids=[];
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.findPage();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.findPage();
            },
            findUser() {
                axios.get(`/user/findAll`).then(res => {
                    this.userList = res.data;
                })
            },
            findTaskType() {
                axios.get(`/tasktype/findAll`).then(res => {
                    this.taskTypeList = res.data;
                })
            },
            findById(id) {
                axios.get(`/task/findById?id=${id}`).then(res => {
                    this.form = res.data;
                    this.dialogFormVisible = true;
                })
                // 当前任务，都被哪些人完成了，根据任务id，查询中间表中，用户的id的信息
                axios.get(`/task/findZhong?tid=${id}`).then(res => {
                    this.ids = res.data;
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            findPage() {
                axios.post(`/task/findPage?pageNum=${this.pageNum}&pageSize=${this.pageSize}`, this.pojo).then(res => {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                })
            },
        },
        created() {
            this.findUser();
            this.findTaskType();
            this.findPage();
        }
    })
</script>
</body>
</html>